<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-main g-main">
    <div class="layui-row">
        <div class="layui-col-xs12">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>班级</th>
                    <th>性别</th>
                    <th>专业</th>
                    <th>电话</th>
                    <th>宿舍</th>
                    <th>照片</th>
                    <th></th>
                </tr>
                </thead>

                <tbody>
                <!--存放数据-->
                </tbody>

            </table>
            <div id="page"></div>
        </div>
    </div>
</div>

<!--<table id="demo" lay-filter="test"></table>-->
<!--<div id="paging">-->
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script src="layui/layui.js"></script>
<script>
    //初始化
    var total
    showRecord(1,10)
    bind()

    //前端分页框架
    layui.use('laypage',function () {
        var laypage=layui.laypage,$=layui.$//这句什么意思？？？
        laypage.render({
            elem:'page'
            ,count:total//只能通过服务端获取了             //数据总数
            ,limit:10
            ,limits:[10,20,30]              //每页数据数
            ,curr:1//起始页为1
            , groups: 5                     //连续页码个数
            , prev: '上一页'                 //上一页文本
            , netx: '下一页'                 //下一页文本
            , first: 1                      //首页文本
            , layout: ['prev', 'page', 'next','limit','refresh','skip']
            ,jump:function (obj,first) {
                if(!first){
                    //清空当前加载的数据
                    $('tbody').empty();
                    //调用加载函数加载数据
                    showRecord(obj.curr,obj.limit)
                    bind()
                }
            }
        })
    });


    //获取每页的数据
    function showRecord(pageNo,pageSize) {
        $.ajax({
            type:"post"
            ,url:"/studentadminsystem/ListStudentServlet2"
            ,data:{
                pageNo:pageNo
                ,pageSize:pageSize
            }
            ,async:false
            ,cache: true
            ,success:function (data) {
                //判断是否为json格式,不是的化转为json
                if((typeof data=='object')&&data.constructor==Object){
                    obj=data;
                }else{
                    obj  = eval("("+data+")");
                }

                total=obj.totalRecords
                for (var i = 0; i < obj.data.length; i++) {
                    var td1 = $("<td></td>").text(obj.data[i].stuNo);
                    var td2 = $("<td></td>").text(obj.data[i].stuName);
                    var td3 = $("<td></td>").text(obj.data[i].classes);
                    var td4 = $("<td></td>").text(obj.data[i].gender);
                    var td5 = $("<td></td>").text(obj.data[i].department);
                    var td6 = $("<td></td>").text(obj.data[i].tel);
                    var td7 = $("<td></td>").text(obj.data[i].dormNo);
                    var td8 = $("<td></td>").append("<img src='"+obj.data[i].photoPath+"'/>");
                    var td9 = $("<td></td>").append("<button type='button' class='layui-btn' id='"+obj.data[i].stuNo+"'>编辑</button>");
                    var tr = $("<tr></tr>").append(td1,td2,td3,td4,td5,td6,td7,td8,td9);
                    $('tbody').append(tr);
                }
            }

        })
    }



    $(document).on("click","button",function () {
        $("#content",window.parent.document).attr("src","PersonalInformation.html?stuNo="+$(this).attr("id"))
    })
    function bind(){
        // $("button").on("click",function () {
        //     $("#content",window.parent.document).attr("src","PersonalInformation.html?stuNo="+$(this).attr("id"))
        // })
        // $(document).on("click","button",function () {
        //     $("#content",window.parent.document).attr("src","PersonalInformation.html?stuNo="+$(this).attr("id"))
        // })
    }

</script>
</body>
</html>